<template>
<div class="result-page common-page">
  <div class="result-page__tabs">
    <div class="padding-wrap">索引列表</div>
    <div class="tab-wrap">
      <xdh-nav-tabs label="首页" 
        name="/" 
        :closable="false"  
        :store="store"
        :show-tool="false"
      ></xdh-nav-tabs>
    </div>
    
  </div>
  <div class="result-page__results">
    <!-- <div :class="{'result': true, 'active': item.label == keyword}"> -->
    <keep-alive>
      <result-body v-for="(item, index) in resultList" :key="index" v-if="item.label == keyword"  :keyword="item.label"></result-body>
    </keep-alive>
    <!-- </div> -->
  </div>
</div>
</template>
<style scoped lang="scss">
@import "../style/_vars.scss";
.result-page{
  display: flex;
  flex-flow: column;
  &__tabs{
    flex: 0 0 auto;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    box-sizing: border-box;
    // padding-left: 249px;
    .padding-wrap{
      flex: 0 0 249px;
      padding-top: 10px;
      text-align: center;
      font-weight: 800;
    }
    .tab-wrap {
      flex: 1; 
      padding-top: 10px;
      background: $--border-color-lighter; // #EDEDED; 
      /deep/ .xdh-nav-tabs{
        background: none;
        .el-tabs__header{
          background: none;
        }
        .el-tabs--card>.el-tabs__header .el-tabs__nav{
          border: 0px solid #e4e7ed;
          .el-tabs__item{
            margin: 0 5px;
            background: white;
            &.is-active{
              color: white;
              background: $--color-primary;
            }
          }
        }
      }
    }
    
  }
  &__results{
    flex: 1;
    position: relative;
    width: 100%;
    height: calc(100% - 40px);
    // border: 1px solid red;
    .result{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: white;
      z-index: -1;
      &.active{
        z-index: 1;
      }
    }
  }
}
</style>

<script>

import XdhNavTabs from '@/widgets/xdh-nav-tabs'
import createStoreModule from '@/widgets/xdh-nav-tabs/store'
import ResultBody from '@/components/result-body'
const STORE_NAME = 'result-nav-tabs'

function listApi (kw) {
  return new Promise(function(resolve, reject) {
    let arr = [
      {label: `${kw}列表1`, num: 4},
      {label: `${kw}列表2`, num: 5},
      {label: `${kw}列表3`, num: 7}
    ]
    setTimeout(() => {
      resolve(arr)
    }, 200)
  })
}
export default {
  name: 'ResultPage',
  components: {
    XdhNavTabs,
    ResultBody
  },
  data() {
    return {
      testList: [],
      store: STORE_NAME
    }
  },
  computed: {
    resultList() {
      let arr = [].concat(this.$store.state[STORE_NAME].list)
      arr.splice(0, 1)
      return arr
    },
    keyword() {
      return this.$route.params.keyword
    }
  },
  watch: {
    
  },
  methods: {
    getList() {
      listApi(this.$route.params.keyword).then((res) => {
        console.log(res)
        this.testList = res
      })
    }
    
  },
  created() {
    if (!this.$store.state[STORE_NAME]) {
      this.$store.registerModule(STORE_NAME, createStoreModule())
    }
  },
  mounted() {
    // console.log('kw', this.keyword)
    this.$store.commit({
      type: `${STORE_NAME}/push`,
      tab: { label: this.keyword, name: `/result/${this.keyword}`, closable: true }
    })
  },
  beforeRouteLeave(to, from, next) {
    // console.log('leave', to)
    if (to.path === '/') { // 回到首页
      this.$store.commit({
        type: `${STORE_NAME}/clear`
      })
      this.$store.commit({
        type: `${STORE_NAME}/push`,
        tab: { label: '首页', name: to.path, closable: false }
      })
    }
    next()
  }
}
</script>


